<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script src="/x/zjabank/static/js/echarts.js"></script>
    <script type="text/javascript" src="/x/zjabank/static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/x/zjabank/static/widget/grid/map.js"></script>
    <script type="text/javascript" src="/x/zjabank/static/widget/grid/dlshouwen.grid.min.js"></script>
    <script type="text/javascript" src="/x/zjabank/static/widget/grid/i18n/zh-cn.js"></script>
    <!-- bootstrap -->
    <script type="text/javascript" src="/x/zjabank/static/widget/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/x/zjabank/static/widget/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/x/zjabank/static/widget/grid/dlshouwen.grid.min.css"/>

    <!-- font-awesome -->
    <link rel="stylesheet" type="text/css" href="/x/zjabank/static/widget/fontAwesome/css/font-awesome.min.css" media="all"/>
</head>
<body>
    <div id="main">
        <div id="echarts" style="width:850px;height:350px;margin:0px auto;"></div>
        <div id="gridContainer" class="dlshouwen-grid-container"></div>
        <div id="gridToolBarContainer" class="dlshouwen-grid-toolbar-container"></div>
    </div>
<script type="text/javascript">
    //图表
    var myChart = echarts.init(document.getElementById('echarts'));
    var xcontent= new Array();
	var data1 = new Array();
    var data2 = new Array();
    var map1 = getMap();
    var map2 = getMap();
    jQuery.ajax({  
    	url:'/x/zjabank/rst/resend?controller=charts@ljbbshuju',
    	type:'get',  
    	dataType:'json', 
    	cache:false,
    	success:function(jsons){
    		var a = []; 
    		//返回的map按照key的值排序
    		$.each(jsons, function(key, val) { a[a.length] = key;  });  
    		a.sort();  
    		//取出排序后的key，value,添加到xcount,data中
    		$.each(a, function(i, key) {  
    		 xcontent.push(key);
    		 var a = new Array();
         	 var a = jsons[key];
         	data1.push(a[0]);
         	data2.push(a[1]);
         	map1.put(key,a[2]);
         	map2.put(key,a[3]);
    		}); 

    var option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            //formatter: '<span style="color:{series.color}">{b0}</span>:<br/>{a0}: {c0}<br />{a1}: {c1}',
            formatter: function (params, ticket,  callback) {
            	var res = params[0].name + '<br/>'; 
            	res=res+'个人:数量'+ params[0].value +';总金额：'+map1.get(params[0].name)+ '(万元)<br/>';
            	res=res+'企业:数量'+ params[1].value +';总金额：'+map2.get(params[0].name)+ '(万元)<br/>'; 
                return res; 
           }
        },
        legend: {
            data: ['个人', '企业']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data:xcontent  //['2016.1', '2016.2', '2016.3', '2016.4', '2016.5', '2016.6', '2016.7']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '个人',
                type: 'line',
                stack: '总量',
                areaStyle: {normal: {}},
              //[120, 132, 101, 134, 90, 230, 210]
                data: data1
                
            },
            {
                name: '企业',
                type: 'line',
                stack: '总量',
                areaStyle: {normal: {}},
              //[220, 182, 191, 234, 290, 330, 310]
                data:data2
            }
        ]
    };
    myChart.setOption(option);
    },
    error:function(){  
    	 alert("数据加载失败！请检查数据链接是否正确");  
    }  
});


    //列表
    var gridColumns = [{
        id: 'shijian',
        title: '月份',
        type: 'string',
        columnClass: 'text-center',
        fastQuery: true,
        fastQueryType: 'eq'
    }, {
        id: 'geren',
        title: '本月个人新增发布数量',
        type: 'number',
        format: '#,###',
        columnClass: 'text-center',
        fastQuery: true,
        fastQueryType: 'lk'
    }, {
        id: 'gerencount',
        title: '本月个人新增融资金额(万元)',
        type: 'number',
        format: '#,###.00',
        columnClass: 'text-center',
        fastQuery: true,
        fastQueryType: 'lk'
    }, {
        id: 'qiye',
        title: '本月企业新增发布数量',
        type: 'number',
        format: '#,###',
        columnClass: 'text-center',
        fastQuery: true,
        fastQueryType: 'lk'
    }, {
        id: 'qiyecount',
        title: '本月企业新增发融资金额(万元)',
        type: 'number',
        format: '#,###.00',
        columnClass: 'text-center',
        fastQuery: true,
        fastQueryType: 'lk'
    }];
    var gridOption = {
        lang: 'zh-cn',
        ajaxLoad: true,
        loadURL: '/x/zjabank/rst/resend?controller=charts@shuju',
        exportFileName: '用户列表',
        columns: gridColumns,
        gridContainer: 'gridContainer',
        toolbarContainer: 'gridToolBarContainer',
        tools: '',
        pageSize: 10,
        pageSizeLimit: [10, 20, 50]
    };
    var grid = $.fn.dlshouwen.grid.init(gridOption);
    $(function () {
        grid.load();
    });
</script>
</body>
</html>